<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
					.box{
						width: 300px;
						height: 500px;
						border: 4px solid green;
						/* step2:绑定动画
						 animation:动画名称 持续时间 次数
						 infinite:无限的
						 linear:匀速
						 */
						animation: yr 5s infinite linear;
					}
					/* step:创建关键帧 */
					/* from:开始帧 */
					/* to:结束帧 */
					@keyframes yr{
						0%,30%{  /*  百分比：时间节点 */
							width: 300px;
							height: 300px;
							background-color: skyblue;
							transform: rotate(0);
						}
						40%,70%{   /* 保持某种状态一段时间 */
							width: 1200px;
							height: 500px;
							background-color: slateblue;
							transform: translate(200px,300px) rotate(180deg);
						}
						80%,100%{
							width: 400px;
							height: 400px;
							background-color: burlywood;
							transform: rotate(240deg);
							border-radius: 200px;
						}
						/* 100%{
							background-color: aquamarine;
							border-radius: 100px;
						} */
						@-webkit-keyframes name{
							from{}
							to{}
						}
					}
				</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
